<template>
  <div>
      <Navigation></Navigation>
      <el-form style="margin-left: 100px;margin-top: 20px;" :model="user" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="头像" prop="avatar">
              <el-upload
                  class="avatar-uploader"
                  action="http://192.168.12.23:8090/chat/common/avatar"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img :src="user.avatar" class="avatar">
              </el-upload>
          </el-form-item>
          <el-form-item label="用户名" prop="username">
              <el-input style="width: 500px;" v-model="user.username"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
              <el-input style="width: 500px;" v-model="user.phone"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
              <el-radio v-model="user.sex" label="0">男</el-radio>
              <el-radio v-model="user.sex" label="1">女</el-radio>
          </el-form-item>

          <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
          </el-form-item>
      </el-form>
  </div>
</template>

<script>

import Navigation from '../components/Navigation.vue';
import {getUserProfile, updateUserProfile} from '../api/user';
export default {
    name: "UserProfile",
    components:{
        Navigation
    },
    data() {
        return{
            user: {
                avatar:'',
                username:'',
                phone:'',
                sex:''
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    {
                        pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
                        message: "请输入正确的手机号",
                        trigger: ["blur", "change"]
                    }
                ]
            }
        }
    },

    created() {
        this.initUserProfile();
    },
    methods: {
        initUserProfile(){
            let data = {
                cid: this.$cookies.get("cid")
            }
            getUserProfile(data).then(res=>{
                this.user = res.data;
                this.user.sex = this.user.sex.toString();
            }).catch(err=>{
                console.log(err);
            })
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    updateUserProfile(this.user).then(res=>{
                        if (res.code === 200){
                            this.$message.success(res.msg);
                        }else {
                            this.$message.error(res.msg);
                        }
                    }).catch(err=>{
                        console.log(err);
                    })
                }
            });
        },
        handleAvatarSuccess(res, file) {
            this.user.avatar = res.data;
            console.log(file);
        },
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isLt2M;
        }
    }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
.avatar {
    width: 100px;
    height: 100px;
    display: block;
    border-radius: 50px;
    overflow: hidden;
}
</style>
<style scoped>

</style>
